<template>
   <div>
    <!-- 固有属性 -->
    <p><input type="text" :placeholder="username"></p>
    <p><input type="password" :placeholder="password"></p>
    <a :href="url">百度首页</a>

    <div :class="{active:isActive}">绑定class属性</div>
    <div :style="{color:textColor,fontSize:fontSize+'px'}"> 对象语法绑定样式</div>
    <div :style="[style1,style2]">数组绑定样式</div>
   </div>
</template>
<script setup>
import { ref } from 'vue'; 
let username = ref("请输入用户名");
const password  = "请输入密码";
const url = "http://www.baidu.com";

const isActive = true;
const textColor = 'pink';
const fontSize = 30;
const style1 = {backgroundColor:"yellow",padidng:"30px"};
const style2 = {color:"blue",border:"1px solid #ddd"}
setTimeout(() => {
    username.value = "请在此输入用户名"
}, 2000);
</script>

<style>
</style>

